import React, { Fragment } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Select, Divider, Col, Row } from 'antd';
import router from 'umi/router';
import styles from './style.less';
import {
  enterpriseNature,
  enterpriseCharacter,
  enterpriseType,
  taxType,
  industryClassification,
  relationType,
  listed,
  economicType,
} from '../../../../../common/selectOption';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ createdForm }) => ({
  createdForm,
}))
@Form.create()
class Step1 extends React.PureComponent {
  state = {
    data: {},
  };

  componentWillMount() {
    let step1 = localStorage.getItem('step1');
    let enterpriseDetail = localStorage.getItem('enterpriseDetail');
    if (step1) {
      this.setState({
        data: JSON.parse(step1),
      });
    } else if (enterpriseDetail) {
      this.setState({
        data: JSON.parse(enterpriseDetail),
      });
    }
  }

  render() {
    const { form } = this.props;
    const { data } = this.state;
    const {
      location: { query },
    } = this.props;

    const { getFieldDecorator, validateFields } = form;
    const onValidateForm = () => {
      validateFields((err, values) => {
        if (!err) {
          router.push({
            pathname: '/preloan/enterprise/create/step2',
            query: query,
          });
          localStorage.setItem('step1', JSON.stringify(values));
        }
      });
    };
    const goBack = () => {
      router.push({
        pathname: '/preloan/enterprise',
        query: query,
      });
    };
    return (
      <Fragment>
        <Form layout="horizontal" className={styles.step1Form}>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="企业名称">
                {getFieldDecorator('enterpriseName', {
                  initialValue: data.enterpriseName,
                  rules: [{ required: true, message: '请输入企业名称' }],
                })(<Input placeholder="请输入企业名称" />)}
              </Form.Item>
            </Col>
            {/*<Col md={12} sm={24}>*/}
            {/*<Form.Item {...formItemLayout} label="股东信息">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入股东信息" }]*/}
            {/*})(<Input placeholder="请输入股东信息"/>)}*/}
            {/*</Form.Item>*/}

            {/*</Col>*/}

            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="企业简称">
                {getFieldDecorator('shortName', {
                  initialValue: data.shortName,
                  rules: [{ required: true, message: '请输入企业简称' }],
                })(<Input placeholder="请输入企业简称" maxLength={6} />)}
              </Form.Item>
            </Col>
            {/*<Col md={12} sm={24}>*/}

            {/*<Form.Item {...formItemLayout} label="注册地址">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入注册地址" }]*/}
            {/*})(<Input placeholder="请输入注册地址"/>)}*/}
            {/*</Form.Item>*/}
            {/*</Col>*/}
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="经营地址">
                {getFieldDecorator('address', {
                  initialValue: data.address,
                  rules: [{ required: true, message: '请输入经营地址' }],
                })(<Input placeholder="请输入经营地址" />)}
              </Form.Item>
            </Col>
            {/*<Col md={12} sm={24}>*/}

            {/*<Form.Item {...formItemLayout} label="经营范围">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入经营范围" }]*/}
            {/*})(<Input placeholder="请输入经营范围"/>)}*/}
            {/*</Form.Item>*/}
            {/*</Col>*/}
            {/*<Col md={12} sm={24}>*/}

            {/*<Form.Item {...formItemLayout} label="成立时间">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入成立时间" }]*/}
            {/*})(<Input placeholder="请输入成立时间"/>)}*/}
            {/*</Form.Item>*/}
            {/*</Col>*/}
            {/*<Col md={12} sm={24}>*/}

            {/*<Form.Item {...formItemLayout} label="主营业务">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入主营业务" }]*/}
            {/*})(<Input placeholder="请输入主营业务"/>)}*/}
            {/*</Form.Item>*/}
            {/*</Col>*/}
            {/*<Col md={12} sm={24}>*/}

            {/*<Form.Item {...formItemLayout} label="经营区域">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入经营区域" }]*/}
            {/*})(<Input placeholder="请输入经营区域"/>)}*/}
            {/*</Form.Item>*/}
            {/*</Col>*/}
            {/*<Col md={12} sm={24}>*/}
            {/*<Form.Item {...formItemLayout} label="收入负债">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入收入负债" }]*/}
            {/*})(<Input placeholder="请输入收入负债"/>)}*/}
            {/*</Form.Item>*/}
            {/*</Col>*/}

            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="企业性质">
                {getFieldDecorator('enterpriseNature', {
                  initialValue: data.enterpriseNature,
                  rules: [{ required: true, message: '请选择企业性质' }],
                })(
                  <Select placeholder="请选择企业性质">
                    {enterpriseNature.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="企业特征">
                {getFieldDecorator('enterpriseCharacter', {
                  initialValue: data.enterpriseCharacter,
                  rules: [{ required: true, message: '请选择企业特征' }],
                })(
                  <Select placeholder="请选择企业特征">
                    {enterpriseCharacter.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="公司类型">
                {getFieldDecorator('enterpriseType', {
                  initialValue: data.enterpriseType,
                  rules: [{ required: true, message: '请选择公司类型' }],
                })(
                  <Select placeholder="请选择公司类型">
                    {enterpriseType.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="行业分类">
                {getFieldDecorator('industryClassification', {
                  initialValue: data.industryClassification,
                  rules: [{ required: true, message: '请选择行业分类' }],
                })(
                  <Select placeholder="请选择行业分类">
                    {industryClassification.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="关联类型">
                {getFieldDecorator('relationType', {
                  initialValue: data.relationType,
                  rules: [{ required: true, message: '请选择关联类型' }],
                })(
                  <Select placeholder="请选择关联类型">
                    {relationType.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="是否上市">
                {getFieldDecorator('listed', {
                  initialValue: data.listed,
                  rules: [{ required: true, message: '请选择是否上市' }],
                })(
                  <Select placeholder="请选择是否上市">
                    {listed.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="是否集团">
                {getFieldDecorator('hasGroup', {
                  initialValue: data.hasGroup,
                  rules: [{ required: true, message: '请选择是否集团' }],
                })(
                  <Select placeholder="请选择是否集团">
                    {listed.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="经济类型">
                {getFieldDecorator('economicType', {
                  initialValue: data.economicType,
                  rules: [{ required: true, message: '请选择经济类型' }],
                })(
                  <Select placeholder="请选择经济类型">
                    {economicType.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="进出口权标识">
                {getFieldDecorator('entranceFlag', {
                  initialValue: data.entranceFlag,
                  rules: [{ required: true, message: '请选择是否' }],
                })(
                  <Select placeholder="请选择是否">
                    {listed.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="注册资本(万元)">
                {getFieldDecorator('capital', {
                  initialValue: data.capital,
                  rules: [{ required: true, message: '请输入注册资本' }],
                })(<Input type={'number'} placeholder="请输入注册资本" />)}
              </Form.Item>
            </Col>
            {/*<Col md={12} sm={24}>*/}
            {/*<Form.Item {...formItemLayout} label="征信逾期情况">*/}
            {/*{getFieldDecorator("receiverName", {*/}
            {/*initialValue: data.receiverName,*/}
            {/*rules: [{ required: true, message: "请输入征信逾期情况" }]*/}
            {/*})(<Input placeholder="请输入征信逾期情况"/>)}*/}
            {/*</Form.Item>*/}
            {/*</Col>*/}
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="组织机构代码">
                {getFieldDecorator('organizationNumber', {
                  initialValue: data.organizationNumber,
                  rules: [{ required: true, message: '请输入组织机构代码' }],
                })(<Input placeholder="请输入组织机构代码" />)}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="登记注册号">
                {getFieldDecorator('registrationNumber', {
                  initialValue: data.registrationNumber,
                  rules: [{ required: true, message: '请输入登记注册号' }],
                })(<Input placeholder="请输入登记注册号" />)}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="税务登记证号">
                {getFieldDecorator('taxNumber', {
                  initialValue: data.taxNumber,
                  rules: [{ required: true, message: '请输入税务登记证号' }],
                })(<Input placeholder="请输入税务登记证号" />)}
              </Form.Item>
            </Col>
            <Col md={12} sm={24}>
              <Form.Item {...formItemLayout} label="税务登记类型">
                {getFieldDecorator('taxType', {
                  initialValue: data.taxType,
                  rules: [{ required: true, message: '请选择税务登记类型' }],
                })(
                  <Select placeholder="请选择税务登记类型">
                    {taxType.map(item => (
                      <Option key={item.key} value={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Col>
          </Row>

          <Form.Item
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: {
                span: formItemLayout.wrapperCol.span,
                offset: formItemLayout.labelCol.span,
              },
            }}
            label=""
          >
            <Button onClick={goBack} style={{ marginRight: '20px' }}>
              返回
            </Button>
            <Button type="primary" onClick={onValidateForm}>
              下一步
            </Button>
          </Form.Item>
        </Form>
      </Fragment>
    );
  }
}

export default Step1;
